<template>
  <div class="content">
    <!-- 添加-输入对方账号/手机号码即可发送请求 -->
    <van-field v-model="addPhone" clearable placeholder="请输入用户账号">
      <template #button>
        <van-button size="small" type="primary" @click="add">请求添加</van-button>
      </template>
    </van-field>

    <router-link to="/chat/new">
      <div class="new_box">
        <div>新朋友
          <van-badge v-if="newSendNum > 0" :content="newSendNum" max="99" style="margin-top: 5px"/>
        </div>
        <div>
          <van-icon style="line-height: 22px" name="arrow" color="rgb(175 176 179)"/>
        </div>
      </div>
    </router-link>

    <div style="margin-top: 10px;border-radius: 10px;background: #ffffff;padding: 10px">
      <div v-for="friend in friendList" :key="friend.id">
        <router-link :to="'/chat/msg/'+friend.phone">
        <div style="display: flex">
          <van-image round width="48" height="48" :src="friend.headImgUrl"/>
          <div style="padding-top: 10px;margin-left: 10px;flex: 1">
            <div style="">{{friend.nickName}}<van-badge v-if="friend.num > 0" :content="friend.num" max="99" /></div>
            <div style="margin-top: 6px;color: #b7b7b7">{{friend.msg}}</div>
          </div>
<!--          <div style="line-height: 45px"><van-button type="success" size="small" @click="agreeFun(pro.id,pro.sendId)">同意</van-button></div>-->
        </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {config} from '@/common/WebIMConfig'
import {Dialog} from "vant";
import api from '@/api/system.js'
import WebIm from "@/common/initWeb"

export default {
  data() {
    return {
      addPhone: "",
      newSendNum: 0,
      friendList: [],
      mePhone: localStorage.getItem("phone")
    }
  },
  created() {
    this.init()
    this.getFriendList()
    this.getNewNum()
  },
  methods: {
    async add() {
      const data = await api.sendFriendByPhoneApi(this.addPhone, "我想添加你为好友")
      await Dialog.alert({title: "提示", message: "好友请求已成功发送"});
    },
    async getFriendList() {
      const data = await api.getMyFriendListApi()
      console.log(data)
      this.friendList = data
      for (let friend of this.friendList) {
        let localNum = localStorage.getItem(this.mePhone + "-" + friend.phone + "-num");
        if (localNum) {
          friend.num = localNum
        }else {
          friend.num = 0
        }
      }
    },
    // 获取新好友数量
    async getNewNum() {
      const data = await api.getSendApi(0)
      this.newSendNum = data.length
    },
    // 初始化监听
    init() {
      const _this = this;
      this.WebIm.conn.listen({
        // 别人给我发送消息
        onTextMessage: function (message) {
          //存储消息到本地
          let localMsg = localStorage.getItem(message.to + "-" + message.from);
          let msgList = []
          if (localMsg) {
            msgList = JSON.parse(localMsg)
          }
          msgList.push({isMe: false, text: message.data, id: message.id})
          localStorage.setItem(message.to + "-" + message.from, JSON.stringify(msgList))

          // 添加未读消息数量
          let localNum = localStorage.getItem(message.to + "-" + message.from + "-num");
          if (localNum) {
            localNum++
            localStorage.setItem(message.to + "-" + message.from + "-num",localNum);
          }else {
            localStorage.setItem(message.to + "-" + message.from + "-num",1);
          }

          for (let friend of _this.friendList) {
            console.log(friend.phone == message.from)
            if (friend.phone == message.from) {
              friend.num = parseInt(friend.num) + 1
            }
          }
        },
        onContactInvited: function (msg) {
          this.getNewNum()
        }, // 收到好友邀请
        onContactDeleted: function () {
        }, // 被删除时回调此方法
        onContactAdded: function () {
        }, // 增加了联系人时回调此方法
        onContactRefuse: function () {
        }, // 好友请求被拒绝
        onContactAgreed: function () {
        } // 好友请求被同意
      })
    }
  },
  component: {}
}
</script>

<style scoped>
.new_box {
  background: #ffffff;
  padding: 10px 20px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.new_box:active {
  background: #f3f3f3;
}
</style>
